<template>
	<view class="msgP">
		<u-navbar :is-back="true" :custom-back="BackM" title="消息" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<!-- <view>
                <image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </view> -->
			</view>
		</u-navbar>

		<view class="headP">
			<view class="tabwiperC">
				<u-tabs-swiper ref="tabs" :list="list" active-color="#4dbf92" inactive-color="" count="count" height="120"
				 :is-scroll="false" :current="current" bar-width="100" gutter="100" @change="tabsChange"></u-tabs-swiper>
			</view>
		</view>
		<view class="hr"></view>

		<view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item :style="{ height: '100%' }" v-for="(item, index) in msgList" :key="index">
					<view class="showDataC">

						<view @click="goDetailedM" class="showDataC-item" v-for="(item, index) in msgList[current].data" :key="index">
							<view class="head">
								<view style="display: flex; align-items: center">
									<image v-if="current == 2" style="width: 1rem; height: 1rem; margin-right: 0.2rem" src="../../style/image/home/horn.png"
									 alt="" />
									<image v-else style="width: 1rem; height: 1rem; margin-right: 0.2rem" src="../../style/image/home/prolify.png"
									 alt="" />


									<!-- <image src="../../style/image/home/horn.png" alt=""> -->
									<view v-if="current==0">收益</view>
									<view v-else-if="current==1">交益</view>
									<view v-else-if="current==2">公告</view>
								</view>
								<view style="
                    font-size: 0.61rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #666666;
                  ">{{item.createTime}}</view>
							</view>

							<view class="showDataC-content">
								<!-- 订单编号：203164778(UC8000)订单已完成，收益+<span>3.50</span>元。 -->
								{{item.content}}
							</view>
						</view>

						<u-empty style="margin-top: 3rem;" v-if="msgList[current].data.length==0" text="暂无数据" mode="data"></u-empty>
					</view>

					<!-- <view>{{item}}</view>
      <view>{{item}}</view>
      <view>{{item}}</view>
      <view>{{item}}</view>
      <view>{{item}}</view>
      <view>{{item}}</view>
      <view>{{item}}</view> -->
					<!-- <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
        </scroll-view> -->
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";
	// import uNavbar from '@/uview-ui/components/u-navbar/u-navbar.vue'
	import {
		loginAPPs,
		findNewsList
	} from "../../utils/uniApi";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public checked = true;

		public current = 0; // tabs组件的current值，表示当前活动的tab选项

		public swiperCurrent = 0;

		public msgList: any = [{
				data: [],
			},
			{
				data: [],
			},
			{
				data: [],
			},
		];

		public list = [{
				name: `收益通知`,
				count: 5,
			},
			{
				name: "交易通知",
				ate_count: 5,
			},
			{
				name: "系统公告",
				ate_count: 5,
			},
		];
		public type: any = ''
		created() {}

		mounted() {
			this.findNewsList(0)
			this.findNewsList(1)
			this.findNewsList(2)
		}

		findNewsList(type:any) {
			let params = {
				userId: uni.getStorageSync("userId") == "" ?
					"" : parseInt(uni.getStorageSync("userId")),
				type: type,
				pageNo: 1,
				pageSize: 10
			}
			findNewsList(params).then((res: any) => {
				// console.log(res,'消息')
				res.data.data.filter((item: any, index: any) => {
					// // this.list.push(item.content)
					if (item.type == 2) {
						this.msgList[0].data.push(item)
						// console.log(this.msgList,'this.msgList')

					}
					if (item.type == 1) {
						this.msgList[1].data.push(item)
						// console.log(this.msgList,'this.msgList')
					}
					if (item.type == 0) {
						console.log(item, 'item')
						this.msgList[2].data.push(item)

					}
				});
			})
		}

		BackM() {

			uni.switchTab({
				url: "./home",
			});

		}

		tabsChange(index: any) {
			console.log(index);
			this.current = index;
			this.swiperCurrent = index;
		}
		transition(data: any) {
			// console.log(data)
		}
		animationfinish(data: any) {
			console.log(data.target.current, "data11111");

			this.current = data.target.current;
		}

		goDetailedM() {
			//    uni.navigateTo({
			//   url: "./msgDetailed",
			// });
		}
	}
</script>

<style lang="scss" scoped>
	uni-swiper {
		display: block;
		height: 80vh;
		overflow-y: scroll;
	}

	uni-swiper-item {
		overflow-y: scroll; //控制滚动
	}

	.msgP {
		background-color: #f3f5f7;
		height: 100vh;
	}

	.hr {
		height: 1rem;
		background-color: #f3f5f7;
	}

	.showDataC-item {
		margin: 0.5rem;
		background-color: white;
		border-radius: 0.3rem;
	}

	.head {
		border-bottom: 1px solid #f3f5f7;
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 0.5rem;
		align-items: center;
	}

	.showDataC-content {
		font-size: 0.78rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #333333;
		padding: 1rem;
	}
</style>
